<template>
  <div class="comListitem">
    <h2>
      <!-- 正在进行 -->
      <slot name="title"></slot>
      <span>{{ itemList.length }}</span>
    </h2>
    <ol>
      <li v-for="item in itemList" :key="item.id">
        <input
          type="checkbox"
          @click="sonChange(item.id)"
          :checked="item.isDone"
        />
        <p>{{ item.content }}</p>
        <button @click="sonDel(item.id)">Del</button>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  props: ["itemList"],
  methods: {
    sonChange(nowId) {
      this.$emit("babaChange", nowId);
    },
    sonDel(nowId){
         this.$emit("babaDel", nowId);
    }
  },
};
</script>

<style lang="scss" scoped>
.comListitem {
  width: 600px;
  margin: 0 auto;
  h2 {
    position: relative;
    span {
      position: absolute;
      top: 2px;
      right: 5px;
      display: inline-block;
      padding: 0 5px;
      height: 20px;
      border-radius: 20px;
      background: #e6e6fa;
      line-height: 22px;
      text-align: center;
      color: #666;
      font-size: 14px;
    }
  }
  ol {
    li {
      display: flex;
      margin: 10px 0;
      height: 30px;
      background-color: lightgrey;
      p {
        flex-grow: 1;
        margin: 0 10px;
        line-height: 30px;
      }
      input {
        height: 30px;
        line-height: 30px;
      }
    }
  }
}
</style>